<template>
  <div class="user-div">
      <div>

        <el-form ref="form" :model="userInfo" label-width="100px">
            <el-form-item label="工号：" class="user-item">
                    <el-input v-model="userInfo.teaId" disabled></el-input>
                </el-form-item>

                <el-form-item label="姓名：" class="user-item">
                    <el-input v-model="userInfo.teaName"></el-input>
                </el-form-item>

                <el-form-item label="性别：" class="user-item">
                    <el-radio v-model="userInfo.gender" label="男"></el-radio>
                    <el-radio v-model="userInfo.gender" label="女"></el-radio>
                </el-form-item>

                <el-form-item label="邮箱：" class="user-item">
                    <el-input v-model="userInfo.email"></el-input>
                </el-form-item>

                <el-form-item label="手机号：" class="user-item">
                    <el-input v-model="userInfo.phone"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button>修改信息</el-button>
                    <el-button>重置</el-button>
                </el-form-item>
                
        </el-form>
      </div>
      <div class="user-div-right" >
          <el-form>
              <el-form-item label="修改密码：">
                  <el-radio-group v-model="pass_model" size="medium"  
                @change="passModelCheck(pass_model)">
                                <el-radio-button label="邮箱"></el-radio-button>
                                <el-radio-button label="手机号"></el-radio-button>
                                <el-radio-button label="原始密码"></el-radio-button>
                </el-radio-group>
                  
              </el-form-item> 

               
             <el-form-item>
                <div class="user-item">
                    <el-input placeholder="请输入收到的验证码" v-model="checkCode" class="input-with-select">
                                
                            <el-button slot="append" icon="el-icon-refresh-right">
                                        发送验证码
                            </el-button>
                        </el-input>
                </div>
            </el-form-item> 

            <el-form-item label="是否开启邮箱通知">
                <el-radio v-model="userInfo.startEmail" :label="true" border>开启</el-radio>
                <el-radio v-model="userInfo.startEmail" :label="false" border >关闭</el-radio>
            </el-form-item>
            <el-form-item >
                <el-tag>关闭邮箱通知的话，可能导致无法及时收到消息</el-tag>
            </el-form-item>

          </el-form>

      </div>

      <div>
          
      </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            userInfo: {
                teaId:1001,
                teaName:'suzyyy',
                phone:"15890373389",
                email:"787356076@qq.com",
                gender:'男',
                startEmail: true
            },
            pass_model:'邮箱',
            checkCode:''
        }
    },
    methods: {
        passModelCheck(pass_model) {
            console.log("email btn 's click ---->", pass_model)
        },
    }
}
</script>

<style>
.user-div {
    margin: 2%;
    margin-top: 4%;
    width: 96%;
    display: flex;
    /* flex-direction: column; */
    justify-content: space-around;
    height: 600px;
}

.user-item {
    width: 370px;
}

.user-div-right {
    margin-left: 2%;
    width: 400px;
}

</style>